<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <a href="BOM1.html">BOM1</a>
    <h2>userAgent</h2>
    <p class="p1"></p>
    <p class="p2">来源：</p>
    <p class="p3">操作系统：</p>
    <button id="forward">前进</button>
    <button id="back">后退</button>
    <script>
        var p1 = document.querySelector('.p1')
        var p2 = document.querySelector('.p2')
        var p3 = document.querySelector('.p3')
        p1.innerText = navigator.userAgent;
        //判断是移动端还是PC端
        if (/Mobile/.test(navigator.userAgent)) {
            p2.innerText += "移动端"
        } else {
            p2.innerText += "PC端"
        }
        //判断操作系统
        if (/iOS/.test(navigator.userAgent)) {
            p3.innerText += "IOS"
        } else if (/Android/.test(navigator.userAgent)) {
            p3.innerText += "安卓"
        } else if (/Windows/.test(navigator.userAgent)) {
            p3.innerText += "windows"
        } else {
            p3.innerText += "未知"
        }

        var forwardBtn = document.getElementById('forward')
        var backBtn = document.getElementById('back')
        forwardBtn.onclick = function() {
            history.forward()
        }

        backBtn.onclick = function() {
            history.back()
        }
    </script>
</body>

</html>